<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>酒店详情</title>
</head>
<!--导包-->
<script src="/js/jquery/2.0.0/jquery.min.js"></script>
<link href="/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<body>
<div class="jumbotron">
    <div class="container">
        <h2 class="text-info"  align="center" style="font-family:宋体;font-weight:bold;font-size:49px;" th:text="${hotel.hotelTranslatedName}"></h2>
        <h5 class="text-danger "  align="center" style="font-family:'微软雅黑 Light';font-size:20px" th:text="'—— '+${hotel.hotelName}+' ——'"></h5>
        <br>
        <div class="text-muted" >
            <p th:text="${hotel.overview}"style="font-family:'微软雅黑 Light'"></p>
        </div>
        <h5 class="text-muted pull-right" style="font-family:'微软雅黑 Light';font-size:20px" th:text="'Assress: '+${hotel.addressline1}"></h5>
        <br>
        <br>
        <br>

    <!--这是一条横线-->
    <!--<hr class="my-4">-->
    <!--<h1 class="display-4">Hello, world!</h1>-->
    <!--<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>-->
    <!--<hr class="my-4">-->
    <!--<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>-->
    <!--<p class="lead">-->
    <!--<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>-->
    <!--</p>-->

    <!--<style>-->

    <!--div.container div.row div {-->
    <!--margin:5px 0px;-->
    <!--}-->
    <!--div.container div.row div {-->
    <!--border: 1px solid deepskyblue;-->
    <!--text-align:center;-->
    <!--}-->
    <!--</style>-->
    <div >
        <!--<div class="col-xs-2"></div>-->
        <div class="col-xs-8" style="font-family: '微软雅黑 Light'">
            <div >
                <div class="panel panel-success" >
                    <!--<span class="text-success">关于酒店</span>-->
                    <p class="bg-success" >关于酒店</p>
                    <div class="panel-heading">星级</div>
                    <div class="panel-body" th:text="${hotel.starRating}+'星级酒店'"></div>
                    <div class="panel-heading">主页链接</div>
                    <a class="panel-body"  th:href="${hotel.url}" >点我点我！！</a>
                </div>
            </div>
            <div>
                <div class="panel panel-info" >
                    <p class="bg-info" >关于位置</p>
                    <div class="panel-heading">洲际</div>
                    <div class="panel-body" th:text="${hotel.continentName}"></div>
                    <div class="panel-heading">国家</div>
                    <div class="panel-body" th:text="${hotel.country}"></div>
                    <div class="panel-heading">城市</div>
                    <div class="panel-body" th:text="${hotel.city}"></div>
                </div>
            </div>
            <!--<div >-->
                <!--<div class="panel panel-warning">-->
                    <!--<p class="bg-warning" >关于位置</p>-->
                    <!--<div class="panel-heading">面板标题</div>-->
                    <!--<div class="panel-body">面板内容</div>-->
                <!--</div>-->
            <!--</div>-->
            <div >
                <div class="panel panel-danger">
                    <p class="bg-danger" >关于住宿</p>
                    <div class="panel-heading">登记住宿时间</div>
                    <div class="panel-body" th:text="${hotel.checkin}"></div>
                    <div class="panel-heading">最迟退房时间</div>
                    <div class="panel-body" th:text="${hotel.checkout}"></div>
                </div>
                <form action="/HTML/createOrder" method="post" name="createOrder" >
                    <button type="submit"  class="btn btn-primary">创建订单</button>
                </form>
            </div>
        </div>
        <div class="col-xs-4">
            <img th:src="@{${hotel.photo1}}" class="img-thumbnail">
            <img th:src="@{${hotel.photo2}}" class="img-thumbnail">
            <img th:src="@{${hotel.photo3}}" class="img-thumbnail">
            <img th:src="@{${hotel.photo4}}" class="img-thumbnail">
            <img th:src="@{${hotel.photo5}}" class="img-thumbnail">
        </div>
        <!--<div class="col-xs-2"></div>-->

    </div>

    <!--<div class="card">-->
        <!--<div class="card-body">-->
            <!--<h5 class="card-title">Panel title</h5>-->
            <!--<h6 class="card-subtitle mb-2 text-muted">Panel subtitle</h6>-->
            <!--<p class="card-text">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>-->
            <!--<a href="#!" class="card-link">Card link</a>-->
            <!--<a href="#!" class="card-link">Another link</a>-->
        <!--</div>-->
    <!--</div>-->
    </div>
</div>
</body>
</html>
<!--这个是自带连接的按钮，应该能用到-->
<!--<p><a role="button" href="#" class="btn btn-success">注册</a></p>-->

<!--<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>-->
